<script>
import personMenu from "../pages/personMenu.vue";
import {axiosSetPersonConfig} from "../api";
import {setPasswordStorage} from "../saves/sessionStorage";

export default {
  name: "personConfig",
  data(){
    return{
      userAccount:this.account,
      oldPassword:"",
      newPassword:"",
      newPasswordRepeat:"",
      dialogVisible: false,
      dialogInfo:"",
    }
  },
  methods:{
    async changePassword(){
      if (this.newPassword === this.newPasswordRepeat) {
        if (this.oldPassword !== this.newPassword) {
          let result = await axiosSetPersonConfig({account:this.account,opassword:this.oldPassword, npassword:this.newPassword})
          if (result.status === 200){
            if(result.data === "AccountEmpty"){
              this.dialogVisible = true;
              this.dialogInfo = "账号错误或者为空";
            }else if (result.data === "OldPasswordEmpty"){
              this.dialogVisible = true;
              this.dialogInfo = "旧密码为空";
            }else if (result.data === "NewPasswordEmpty"){
              this.dialogVisible = true;
              this.dialogInfo = "新密码为空";
            }else if (result.data === "Normal"){
              this.dialogVisible = true;
              this.dialogInfo = "修改成功";
              setPasswordStorage(this.newPassword);
            }else if (result.data === "UnknownError"){
              this.dialogVisible = true;
              this.dialogInfo = "未知错误";
            }else if (result.data === "POAIncorrect"){
              this.dialogVisible = true;
              this.dialogInfo = "旧密码错误";
            }
        }
        }else{
          this.dialogVisible = true;
          this.dialogInfo = "新旧密码一致";
        }
      }else{
        this.dialogVisible = true;
        this.dialogInfo = "两次输入新密码不一致";
      }
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
    },
    handleEnter(){
      this.dialogVisible = false;
    }
  },
  components: {personMenu},
}
</script>

<template>
  <div id="personConfig">
    <el-dialog
        :before-close="handleClose"
        :visible.sync="dialogVisible"
        title="提示"
        width="30%">
      <span>{{dialogInfo}}</span>
      <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="handleEnter">确 定</el-button>
  </span>
    </el-dialog>
    <div class="person-config-box">
      <el-col :xs="8" :sm="6" :md="6" :lg="5" :xl="4">
        <div class="grid-content">
          <personMenu/>
        </div>
      </el-col>
      <el-col :xs="16" :sm="18" :md="18" :lg="19" :xl="20">
        <div class="grid-content bg-purple">
          <div class="config">
            <p>用户设置</p>
            <div class="config-box">
              <p>重置密码</p>
              <div class="config-input">
                <el-input placeholder="旧密码" v-model="oldPassword"></el-input>
                <el-input placeholder="新密码" v-model="newPassword"></el-input>
                <el-input placeholder="重复新密码" v-model="newPasswordRepeat"></el-input>
              </div>
              <div class="config-btn">
                <el-button @click="changePassword()">提交</el-button>
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </div>
  </div>
</template>

<style scoped src="../style/person-config.css">

</style>